<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>计算属性：提供的函数将用作属性vm.reversedMessage的getter</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="app02">
    <!-- vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。 -->
    <p>原始字符串：{{message}}</p>
    <p>计算后反转字符串：{{reversedMessage}}</p>
  </div>

<script>

  new Vue({
    el:'#app02',
    data:{
      message: 'Ronoob!'
    },
    // 我们可以使用 methods 来替代 computed，效果上两个都是一样的，
    // 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
    // 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
    computed: {
      // 计算属性的getter
      reversedMessage: function () {
        // this指向vm实例
        return this.message.split('').reverse().join('')
      }
    }

  })

</script>
</body>
</html>
